<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/course.css" type="text/css">
    <link rel="stylesheet" href="/css/nav.css">

</head>
<body>
<%
    String path = request.getContextPath();
%>
    <div class="head">
    </div>

<div id="main">
    <div class="wrap ">
        <div class="top">
            <div class="course-top clearfix">
                <a class="top-header" href="/course/list">
                    <img src="http://localhost:8080/images/logo-course.png?111" alt="免费课程" width="140" height="60">
                </a>
                <!-- 这是广告位，无论如何都得有这个容器分割上下元素 -->
                <div class="adver-con" style="display: inline-block;margin-left: 16px;">
                    <img src="http://localhost:8080/images/course-top.png" style="height:60px;width: 96px;">
                </div>
                <div class='course-top-search'>
                    <div class="search-area" data-search="top-banner">
                        <input class="search-input" data-suggest-trigger="suggest-trigger"  placeholder="搜索感兴趣的内容" type="text" autocomplete="off">
                        <input type='hidden' class='btn_search' data-search-btn="search-btn" />
                        <ul class="search-area-result" data-suggest-result="suggest-result">
                        </ul>
                    </div>
                    <div class='showhide-search' data-show='no'>
                        <span class='glyphicon glyphicon-search  icon-search'></span>
                    </div>
                </div>
            </div>
            <div class="course-content">
                <div class="course-nav-box">
                    <div class="course-nav-row clearfix">
                        <span class="hd l">方向：</span>
                        <div class="bd">
                            <ul class="direct">
                                <li class="course-nav-item">
                                    <a href="/course" data-ct="0">全部</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=2" data-ct="2">前端开发</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=3" data-ct="3">后端开发</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=4" data-ct="4">移动开发</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=1" data-ct="1">前沿技术</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=5" data-ct="5">云计算&大数据</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=6" data-ct="6">运维&测试</a>
                                </li>
                                <li class="course-nav-item
                                        ">
                                    <a href="/course?directId=7" data-ct="7">UI设计&多媒体</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="course-nav-row course-nav-skills clearfix">
                        <div class="js-course-skills course-skills-box">
                            <span class="hd l">分类：</span>
                            <div class="bd">
                                <ul class="type">
                                    <li class="course-nav-item">
                                        <a href="/course/list?" data-id="0">全部</a>
                                    </li>
                                    <c:forEach items="${courses}" var="c">
                                        <c:forEach items="${c.courseTypes}" var="t">
                                            <c:if test="${ not empty t.name}">
                                                <li class="course-nav-item">
                                                    <a href="" data-id="${t.id}">${t.name}</a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="course-nav-row clearfix border_bottom_none">
                        <a href='javascript:;' class='course-recommend' onclick="_hmt.push(['_trackEvent', 'course', 'click', 'inlet'])"></a>
                        <span class="hd l">难度：</span>
                        <div class="bd">
                            <ul class="level">
                                <li class="course-nav-item">
                                    <a href="/level/0" level-id="0">全部</a>
                                </li>
                                <li class="course-nav-item ">
                                    <a href="/level/1" level-id="1">入门</a>
                                </li>
                                <li class="course-nav-item ">
                                    <a href="/level/2" level-id="2">初级</a>
                                </li>
                                <li class="course-nav-item ">
                                    <a href="/level/3" level-id="3">中级</a>
                                </li>
                                <li class="course-nav-item ">
                                    <a href="/level/4" level-id="4">高级</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container" style="width: 1416px">
        <div class="course-tool-bar clearfix">
            <div class="tool-left l">
                <a href="/course/list?sort=last" class="moco-change-smalle-btn active">最新</a>
                <a href="/course/list?sort=pop" class="moco-change-smalle-btn">最热</a>
            </div>
            <div class="l">
                    <span class="tool-item" style="display: none;">
                        <a class="follow-learn tool-chk" href="javascript:void(0);">跟我学</a>
                    </span>
            </div>
            <div class="tool-right r">
                    <span class="tool-item">
                        <a class="hide-learned tool-chk" href="">
                            隐藏已参加课程
                        </a>
                    </span>
                <span class="tool-item total-num">
                       共<b>0</b>个课程
                    </span>
                <span class="tool-item tool-pager">
                        <span class="pager-num">
                          <b class="pager-cur">1</b>/<em class="pager-total">30</em>
                        </span>
                        <a href="javascript:void(0)" class="pager-action pager-prev  disabled">
                            <span class="glyphicon glyphicon-chevron-left icon-right2"></span>
                        </a>

                        <a href="/course/list?page=2" class="pager-action pager-next">
                            <span class="glyphicon glyphicon-chevron-right icon-right2"></span>
                        </a>
                    </span>
            </div>

        </div>
        <div class="course-list">
            <div class="moco-course-list">
                <div class="clearfix">
                    <c:forEach items="${courses}" var="c">
                        <c:forEach items="${c.courseTypes}" var="t">
                            <c:forEach items="${t.courses}" var="v" varStatus="status">
                                <c:if test="${status.index==1}">
                                    <span class="course-size" style="display: none">${t.courses.size()}</span>
                                </c:if>
                                <div class="course-card-container">
                                    <a target="_blank" href="/course/${v.id}" class="course-card">
                                        <div class="course-card-top">
                                            <img class="course-banner lazy" data-original="${v.log}" src="${v.log}" style="display: inline;">
                                            <div class="course-label">
                                                <label>${t.name}</label>
                                            </div>
                                        </div>
                                        <div class="course-card-content">
                                            <h3 class="course-card-name">${v.name}</h3>
                                            <div class="clearfix course-card-bottom">
                                                <div class="course-card-info">
                                                        <span>
                                                            <c:if test="${v.level==1}">
                                                                初级
                                                            </c:if>
                                                            <c:if test="${v.level==2}">
                                                                中级
                                                            </c:if>
                                                            <c:if test="${v.level==3}">
                                                                高级
                                                            </c:if>
                                                        </span>
                                                    <span>
                                                            <span class="glyphicon glyphicon-user"></span>${v.studyNo}
                                                        </span>
                                                </div>
                                                <p class="course-card-desc">${v.notice}</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </c:forEach>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<!--登录界面-->
<div class="modal-backdrop" id="modal-backdrop" style="display: none"></div>
<div id="signin" class="rl-modal" style="display: none">
    <div class="rl-modal-header">
        <button class="rl-close" type="button"></button>
        <h1>
            <span class="btn-login">登录</span>
            <span class="btn-register active-title">注册</span>
        </h1>
    </div>
    <div id="signup" class="rl-modal-body ">
        <form id="signup-form" action="">
            <div class="rlf-group">
                <input id="register-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入注册的手机号"
                       name="phone" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的手机号</p>
            </div>

            <div class="rlf-group has-error">
                <a href="#" class="verify-img-wrap" id="changeImg">
                    <canvas class="show-captcha" id="canvas" width="130" height="38"></canvas>
                </a>
                <input id="register-pictureCheck" type="text" class="ipt" maxlength="6" value="" placeholder="请输入验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的验证码</p>
            </div>
            <div class="rlf-group phoneVerityBox">
                <input type="checkbox" class="auto-cbx" autocomplete="off">&nbsp;&nbsp;同意
                <a href="" class="ipt-agreement">《授教网注册协议》</a>
            </div>
            <p id="signin-globle-error"></p>
            <div class="rlf-group phoneVerityBox">
                <input id="moco-btn-register" type="button" class="moco-btn" value="注册">
            </div>
        </form>
    </div>

    <div id="register-signin" class="rl-modal-body " style="display: none">
        <form id="signin-form" action="">
            <p class="title">填写短信验证码密码完成注册</p>
            <p class="subtitle">
                短信验证码已发送至
                <span name="phone"  class="js-phoneNumber">17606556909</span>
                <!--                <input type="text" name="phone" style="display: none" value="17606556909">-->
            </p>

            <div class="rlf-group js-phoneVerityBox">
                <p class="rsSend">
                    <button type="button" class="js-register-send" state="false">重新发送</button>
                </p>
                <input id="register-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap"></p>
            </div>
            <div class="rlf-group">
                <a class="proclaim-btn" hidefocus="true">
                    <span class="glyphicon glyphicon-eye-close"></span>
                </a>
                <input id="register-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入6-16位密码,区分大小写,不能用空格"
                       name="pwd" autocomplete="off">
                <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
            </div>
            <div class="rlf-group">
                <input type="button" class="moco-btn moco-btn-register1" value="完成">
            </div>
            <p class="backNotify">返回修改手机号</p>
        </form>
    </div>

    <div class="rl-modal-body js-loginWrap" style="display: none">
        <div>
            <form id="signup-form" action="">
                <div class="rlf-group">
                    <input id="login-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入登录的手机号"
                           name="phone" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入正确的手机号</p>
                </div>
                <div class="rlf-group js-loginPassword">
                    <a class="proclaim-btn" hidefocus="true">
                        <span class="glyphicon glyphicon-eye-close"></span>
                    </a>
                    <input id="login-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入密码"
                           name="password" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
                </div>
                <div class="rlf-group js-phoneVerityBox">
                    <p class="rsSend">
                        <button type="button" class="js-signin-send" state="true" >获取验证码</button>
                    </p>
                    <input id="login-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                           name="checkno" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6位纯数字的短信验证码</p>
                </div>
                <div class="rlf-group phoneVerityBox">
                    <input type="checkbox" class="auto-cbx auto-login" autocomplete="off">&nbsp;&nbsp;7天内自动登录
                    <a href="#" class="rlf-forget">找回密码</a>
                </div>
                <p id="login-globle-error">账号密码错误</p>
                <div class="rlf-group phoneVerityBox">
                    <input type="button" loginway="code" class="moco-btn moco-btn-login" value="登录">
                </div>
                <div class="rlf-group phoneVerityBox">
                    <span class="rlf-other" state="loginPassword">账号密码登录</span>
                </div>
            </form>
        </div>
    </div>
    <div class="rl-modal-body reg-success1" style="display: none;text-align: center">
        <span class="icon-send-success">
            <span class="glyphicon glyphicon-ok"></span>
        </span>
        <p>恭喜注册成功</p>
        <div class="rlf-group" style="text-align: center">
            <input type="text" class="moco-btn js-gotoLearn" value="返回登录">
            <div>
                <a href="">完善资料</a>
            </div>
        </div>
    </div>
</div>
<script src="http://localhost:8080/js/jQuery%20v3.3.1.js"></script>
    <script src="http://localhost:8080/bootstrap/js/bootstrap.min.js"></script>
    <script src="http://localhost:8080/js/course.js"></script>
    <script>
        function loadNav(){
            console.log(44)
            $.ajax({cache: false});
            $(".head").load("html/nav.html nav")
            // $(".foot").load("nav.html #modal-backdrop");
            // $(".foot").load("nav.html #signin")
        }
        loadNav();
    </script>
<script src="../js/nav.js"></script>
</body>
</html>